<!DOCTYPE html>
<html>
<title>JavaScript Form表单验证示例 - 基础教程(cainiaojc.com)</title>

<head>
    <style>
        * {
            box-sizing: border-box;
        }
        
        .my-form {
            background-color: #fefefe;
            border: 5px solid #eee;
        }
        
        .wrapper {
            padding: 4px 20px 20px;
        }
        
        .footer {
            padding: 20px;
            background-color: #f1f1f1;
        }
        
        input[type=text],
        input[type=password],
        input[type=email] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
        }
        
        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
            font-size: 16px;
        }
    </style>
</head>

<body>

    <form class="my-form" action="demo-form.php" onsubmit="return validateForm()" method="POST">
        <div class="wrapper">
            <h2>注册账号</h2>
            <label for="username"><b>姓名</b></label>
            <input type="text" placeholder="输入用户名" name="uname" id="username" required>

            <label for="useremail"><b>邮箱</b></label>
            <input type="email" placeholder="输入Email" name="uemail" id="useremail" required>

            <label for="userpwd1"><b>密码</b></label>
            <input type="password" placeholder="输入密码" name="psw" id="userpwd1" required>
            <input type="password" placeholder="确认密码" name="cpsw" id="userpwd2" required>

            <p style="margin-top: 10px;">
                <input type="radio" name="gender" id="female" value="female" checked><label for="female">女</label>
                <input type="radio" name="gender" id="male" value="male"><label for="male">男</label>
            </p>
            <button type="submit">注册</button>
        </div>

        <div class="footer">
            <div>已经有一个帐户? <a href="#">登录</a></div>
        </div>
    </form>
    <br>
    <hr>
    <br>
    <h3>下面是简单的HTML表单示例:</h3>
    <form action="demo.php" onsubmit="return numberTest()" method="GET">
        <label for="number">输入1-10的数字</label>
        <input type="text" name="inputNumber" id="number">
        <button type="submit">验证</button>
    </form>

    <script>
        function validateForm() {
            let name = document.getElementById("username").value;
            let email = document.getElementById("useremail").value;
            let pswd1 = document.getElementById("userpwd1").value;
            let pswd2 = document.getElementById("userpwd2").value;

            if (name == "") {
                alert("Name must be filled out");
                return false;
            }
            if (email == "") {
                alert("必须填写电子邮件");
                return false;
            }
            if (pswd1 !== "" || pswd2 !== "") {
                if (pswd1 !== pswd2) {
                    alert("Password didn't match");
                    return false;
                }
            } else {
                alert("密码必须填写");
                return false;
            }

            return true;
        }

        function numberTest() {
            let x = document.getElementById("number").value;
            if (x < 0 || x > 10) {
                alert("数字太大了");
                return false;
            }
            return true;
        }
    </script>

</body>

</html>